<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>慕课七夕主题</title>
    <link rel='stylesheet' href='style.css' />
    <link rel='stylesheet' href='pageA.css' />
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="Swipe.js"></script>
</head>
<style type="text/css">
    .charector {
        position: absolute;
        left: 6%;
        top: 55%;
        width: 151px;
        height: 291px;
        background: url(http://img.mukewang.com/55ade248000198ae10550582.png) -0px -291px no-repeat;
    }

    .slowWalk {
        /* 填入动画样式规则 */
        /*规定 @keyframes 动画的名称。*/
        -webkit-animation-name: person-slow;
        /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
        -webkit-animation-duration: 950ms;
        /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
        -webkit-animation-iteration-count: infinite;
        /*动画切换的方式是一帧一帧的改变*/
        -webkit-animation-timing-function: steps(1, start);
        -moz-animation-name: person-slow;
        -moz-animation-duration: 950ms;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: steps(1, start)
    }

    /* 普通慢走 */

    @-webkit-keyframes person-slow {
        0% {
            background-position: -0px -291px;
        }

        25% {
            background-position: -602px -0px;
        }

        50% {
            background-position: -302px -291px;
        }

        75% {
            background-position: -151px -291px;
        }

        100% {
            background-position: -0px -291px;
        }
    }

    @-moz-keyframes person-slow {
        0% {
            background-position: -0px -291px;
        }

        25% {
            background-position: -602px -0px;
        }

        50% {
            background-position: -302px -291px;
        }

        75% {
            background-position: -151px -291px;
        }

        100% {
            background-position: -0px -291px;
        }
    }
</style>

<body>
    <div id='content'>
        <ul class='content-wrap'>
            <li>
                <div class="a_background">
                    <div class="a_background_top"></div>
                    <div class="a_background_middle"></div>
                    <div class="a_background_botton"></div>
                </div>
            </li>
            <li> 页面2 </li>
            <li> 页面3 </li>
        </ul>
        <div id="boy" class="charector"></div>
        <div class="button">
            <button>点击开始动画</button>
        </div>
    </div>
    <script type="text/javascript">
        var swipe = Swipe($("#content"));

        // 获取数据
        var getValue = function (className) {
            var $elem = $('' + className + '');
            // 走路的路线坐标
            return {
                height: $elem.height(),
                top: $elem.position().top
            };
        }

        // 路的Y轴
        var pathY = function () {
            var data = getValue('.a_background_middle');
            return data.top + data.height / 2;
        }();

        var $boy = $("#boy");
        var boyHeight = $boy.height();

        // 修正小男孩的正确位置
        $boy.css({
            top: pathY - boyHeight + 25
        });

        // ==========================
        //     增加精灵动画
        // ==========================

        $('button').click(function () {
            // 增加走路的CSS3关键帧规则
            $boy.toggleClass('slowWalk');
            // swipe.scrollTo($("#content").width() * 2, 5000);
        });
        let animate1 = false;
        let animate2 = false;
        let tiao = false;
        $(document).keydown(function (event) {
            console.log(event.keyCode);
            if (event.keyCode == 39) {
                if (animate1 === true) return;
                $("#boy").animate({
                    left: ($("#boy").position().left + 100) + 'px'
                }, 100, "linear", function () {
                    animate1 = false;
                });
                // console.log($("#boy").position().left);
            }
            if (event.keyCode == 37) {
                if (animate2 === true) return;
                $("#boy").animate({
                    left: ($("#boy").position().left - 100) + 'px'
                }, 100, "linear", function () {
                    animate2 = false;
                });
            }
            if (event.keyCode == 32) {
                if (tiao === true) return;
                tiao = true;
                let top = $("#boy").position().top;
                $("#boy").animate({
                    top: (top - 200) + 'px'
                }, 100, 'swing', function () {
                    $("#boy").animate({
                        top: top
                    }, 100, 'swing', function () {
                        tiao = false;
                    })
                });
            }
            console.log(event.keyCode);
        });

    </script>
</body>

</html>